<template>
  <div class="VideoDetail">
    <div class="left">
      <h4>{{ type ? '视频详情' : 'MV详情' }}</h4>
      <video :src="url" width="500" height="280" controls autoplay></video>
      <div class="creator">
        <img v-lazy="detail.avatarUrl || detail.cover" alt="" />
        <span v-if="detail.creator">{{ detail.creator.nickname }}</span>
        <span v-if="detail.artists">{{ detail.artists[0].name }}</span>
      </div>
      <div class="title">{{ detail.title || detail.name }}</div>
      <div class="time">
        <span v-if="detail.creator">发布:{{ detail.publishTime | dateFormat }}</span>
        <span v-if="detail.artists">发布:{{ detail.publishTime }}</span>
        <span>播放:{{ detail.playTime || detail.playCount }}次</span>
      </div>
      <h4>评论</h4>
      <el-input type="textarea" :rows="3" :placeholder="placeholder" v-model="textarea" maxlength="140" show-word-limit resize="none"></el-input>
      <el-button round @click="postComment">评论</el-button>
      <!-- 评论 -->
      <h5>全部评论({{ comment.total }})</h5>
      <Comment :comment="comment" :pageData="pageData" :id="vid" :type="type ? 5 : 1" @refresh="getComment" ref="comment"></Comment>
    </div>
    <!-- 相关视频 -->
    <div class="right">
      <h4>{{ type ? '相关视频' : '相关MV' }}</h4>
      <div class="relate" v-for="(item, index) in relate" :key="index">
        <img v-lazy="item.coverUrl || item.cover" @click="relateClick(item.vid || item.id)" alt="" />
        <div class="name">
          <div>{{ item.title || item.name }}</div>
          <div v-if="item.creator">by {{ item.creator[0].userName }}</div>
          <div v-if="item.artists">by {{ item.artists[0].name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Comment from '@/components/comment/Comment.vue';

import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      vid: '',
      type: '',
      url: '',
      detail: '',
      relate: '',
      comment: '',
      //页码配置
      pageData: {
        total: 0,
        currentPage: 1,
        pageSize: 20,
      },
      page: 1, //当前请求页码
      textarea: '',
      placeholder: '请输入内容',
      t: 1,
      commentId: '',
    };
  },
  computed: {
    ...mapGetters(['isLogin']),
  },
  provide() {
    return {
      currentChange: this.currentChange,
      replyClick: this.replyClick,
      closeCardClick: this.closeCardClick,
    };
  },
  created() {
    this.vid = this.$route.params.vid;
    this.getData();
  },
  components: { Comment },
  methods: {
    getData() {
      this.type = isNaN(Number(this.vid));
      if (this.type) {
        this.getVideoDetail();
      } else {
        this.getMvDetail();
      }
      this.getComment();
    },
    //获取视频数据
    async getVideoDetail() {
      const { urls } = await this.$request('/video/url', { id: this.vid });
      this.url = urls[0].url;
      const { data } = await this.$request('/video/detail', { id: this.vid });
      this.detail = data;
      const res = await this.$request('/related/allvideo', { id: this.vid });
      this.relate = res.data;
    },
    //获取mv数据
    async getMvDetail() {
      const { data } = await this.$request('/mv/url', { id: this.vid });
      this.url = data.url;
      const res = await this.$request('/mv/detail', { mvid: this.vid });
      this.detail = res.data;
      const { mvs } = await this.$request('/simi/mv', { mvid: this.vid });
      this.relate = mvs;
    },
    //请求评论
    async getComment() {
      if (this.type) {
        const result = await this.$request('/comment/video', { id: this.vid, offset: (this.page - 1) * 20, timestamp: Date.now() });
        this.comment = result;
        this.pageData.total = result.total;
      } else {
        const res = await this.$request('/comment/mv', { id: this.vid, offset: (this.page - 1) * 20, timestamp: Date.now() });
        this.comment = res;
        this.pageData.total = res.total;
      }
    },
    //相关点击
    relateClick(id) {
      this.$router.replace('/videodetail/' + id).catch((error) => {});
    },
    //页码改变请求数据
    currentChange(page) {
      this.page = page;
      this.getComment();
    },
    //评论发布
    postComment() {
      if (!this.isLogin) return this.$message.error('需要登录');
      if (!this.textarea) return this.$message('不能发表空白评论');
      //重置评论页数
      this.page = 1;
      this.pageData.currentPage = 1;
      //发送评论
      let data = {
        t: this.t,
        type: this.type ? 5 : 1,
        id: this.vid,
        content: this.textarea,
        commentId: this.commentId,
      };
      this.$refs.comment.postComment(data);
      this.textarea = '';
    },
    //回复评论点击
    replyClick(cid, name) {
      this.placeholder = `回复${name}:`;
      this.t = 2;
      this.commentId = cid;
    },
    closeCardClick(){}
  },
  watch: {
    '$route.params.vid'(vid) {
      if (!vid) return;
      this.detail = '';
      this.relate = '';
      this.comment = '';
      this.vid = vid;
      this.getData();
    },
  },
};
</script>

<style scoped='scoped' lang='scss'>
.VideoDetail {
  display: flex;
  justify-content: space-between;
  .left {
    width: 500px;
    .creator {
      margin: 10px 0;
      img {
        @include image(50px, 50%);
        margin-right: 10px;
        vertical-align: middle;
      }
    }
    .title {
      font-size: 20px;
      font-weight: 600;
    }
    .time {
      font-size: 12px;
      color: #919191;
      margin: 10px 0;
      span {
        margin-right: 5px;
      }
    }
    .el-button {
      background-color: #fff;
      border-color: $grayHover;
      color: #303133;
      margin: 10px 0;
      &:hover {
        background-color: $gray;
      }
    }
  }
  .right {
    width: 265px;
    .relate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      img {
        width: 135px;
        height: 75px;
        border-radius: 5px;
        cursor: pointer;
      }
      .name {
        display: flex;
        width: 120px;
        flex-direction: column;
        justify-content: space-around;
        font-size: 12px;
        color: #919191;

        :first-child {
          font-size: 13px;
          color: #303133;
        }
        > div {
          margin: 10px 0;
          @include hidWord;
        }
      }
    }
  }
}
</style>